<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<style type="text/css">
			.el-input .el-input__suffix-inner {
				cursor: pointer;
			}

			.serverList-wrapper {
				height: 100%;
				box-sizing: border-box;
			}

			.serverList-content-wrapper {
				min-height: 100%;
				background: #F8F8FF;
				padding: 20px 20px 0px;
				box-sizing: border-box;
			}

			.form-wrapper .button-wrapper {
				padding: 20px 0px;
				border-top: 1px solid #EEEEEE;
			}
			.from-title-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.from-title-wrapper .helpdoc {
					color: #6462F3;
					cursor: pointer;
			}
			.from-title a img {
				width: 22px;
				margin-bottom: -3px;
				margin-right: 6px;

			}

			.data-container {
				border-top: 1px solid #eee;
				width: 100%;
				padding: 0 140px;
				box-sizing: border-box;
			}

			.yz-type-title {
				height: 90px;
				margin: 30px auto 0;
			}

			.yz-type-title .yz-step {
				float: left;
				width: 25%;
				color: #777;
				text-align: center;
				position: relative;
			}

			.yz-type-title .yz-step:after {
				content: "";
				width: 100%;
				height: 1px;
				border: 0;
				border-bottom: 2px dotted #c4c4c4;
				position: absolute;
				left: 0;
				top: 6px;
			}

			.yz-type-title .icon-item {
				width: 100%;
				height: 18px;
				margin-bottom: 16px;
			}

			.yz-type-title .icon-item:before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 10px;
				height: 10px;
				background: #fff;
				left: 47.5%;
				border: 3px solid #c4c4c4;
				border-radius: 10px;
			}

			.yz-type-title .step-cur .icon-item:before {
				border-color: #6462F3;
			}

			.yz-type-title .step-cur:after {
				border-bottom: 2px solid #6462F3;
			}

			.yz-type-title .h-sort {
				font-weight: 700;
				line-height: 28px;
			}

			.yz-type-title .p-sort {
				font-size: 16px;
				line-height: 24px;
			}

			.yz-type-title .step-cur {
				color: #6462F3;
			}

			.yz-type-title .step1,
			.yz-type-title .step4 {
				width: 20%;
				text-align: left;
			}

			.yz-type-title .step2,
			.yz-type-title .step3 {
				width: 30%;
			}

			.yz-type-title .step1 .icon-item:before {
				left: 30%;
			}

			.yz-type-title .step4 .icon-item:before {
				left: 65%;
			}

			.yz-type-title .step1 .h-sort {
				margin-left: 25%;
			}

			.yz-type-title .step1 .p-sort {
				margin-left: 15%;
			}

			.yz-type-title .step4 .h-sort {
				margin-left: 60%;
			}

			.yz-type-title .step4 .p-sort {
				margin-left: 56%;
			}

			.form-wrapper .category-wrapper {
				padding-bottom: 19px;
				border-bottom: 1px solid #EEEEEE;
				overflow: auto;
			}

			.form-wrapper .category-wrapper .content-title-h5 {
				float: left;
				line-height: 36px;
				font-size: 16px;
			}

			.form-wrapper .category-wrapper .search-box {
				float: right;
				width: 290px;
				height: 36px;
				border: 1px solid #eee;
				border-radius: 4px;
				line-height: 36px;
				padding-left: 10px;
				color: #999;
			}

			.form-wrapper .type-wrapper {
				overflow: auto;
				padding-top: 20px;
				/* width: 100%; */
				margin: 0 auto;
			}

			.form-wrapper .yz-msx3-box {
				float: left;
				padding: 10px;
				overflow: auto;
				width: 31.806%;
				cursor: pointer;
			}

			.form-wrapper .is-appear {
				border: 1px solid #eee;
				padding: 20px 0;
				border-radius: 4px;
				overflow: auto;
				height: 108px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				cursor: pointer;
			}

			.form-wrapper .i-icon-box {
				width: 40px;
				height: 40px;
				margin: 10px 20px;
				border-radius: 4px;
				background: #ddd;
				border-right: 1px solid #eee;
			}

			.form-wrapper .p-text-box {
			flex: 1;
			box-sizing: border-box;
				padding: 0 20px;
				position: relative;
				
			}
			.form-wrapper .p-text-box .linear {
				position: absolute;
				left: 0px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 1px;
				height: 40px;
				background-color: #EEEEEE;
			}

			.form-wrapper .h5-text {
				font-size: 16px;
				margin-bottom: 10px;
				color: #333;
			}

			.form-wrapper .p10-text {
				line-height: 20px;
				color: #777;
			}

						.form-wrapper .is-appear:hover{
				border-color: #6462F3;
				/* background-color: #F8F8FF; */
			}
			.form-wrapper .is-appear.active {
				border-color: #6462F3;
				background-color: #F8F8FF;
			}




			.form-wrapper .category-wrapper {
				display: flex;
				justify-content: space-between;
			}

			.form-wrapper .category-wrapper .el-input__icon {
				line-height: 36px;
			}


			/* step 2 */
			.step2-wrapper .el-tabs--left .el-tabs__item.is-left {
				/* text-align: center; */
				width: 314px;
				height: 46px !important;
				background: #FFFFFF;
				border-bottom: 1px solid #EEEEEE;
				border-left: 1px solid #eeeeee;
				border-right: 1px solid #eeeeee;
				display: flex !important;
				align-items: center;
				padding-left: 42px;
			}
			.step2-wrapper .el-tabs--left .el-tabs__item.is-left:last-child {
				display: none !important;
			}

			.step2-wrapper .el-tabs--left .el-tabs__active-bar.is-left {
				/* display: none; */
				left: 0;
				width: 100%;
				background-color: #F8F8FF !important;
				z-index: -1;
				height: 48px !important;
			}

			.step2-wrapper .el-tabs--left .el-tabs__item.is-active {
				background-color: transparent;
				z-index: 3;
				border-right: none;
			}

			.step2-wrapper .form-wrapper-content {
				justify-content: space-between;
			}

			.step2-wrapper .step-buttonwrapper {

				align-items: center;
			}

			.step2-wrapper .step-buttonwrapper>span {
				color: #999999;
				font-size: 14px;
				line-height: 14px;
				margin-right: 14px;
			}

			.step2-wrapper .step-buttonwrapper .yzButton.sumbitButton {
				width: 80px;
				height: 36px;
				background: #FFFFFF;
				border: 1px solid #6462F3;
				border-radius: 4px;
				box-sizing: border-box;
				color: #6462F3;
			}

			.step2-wrapper .el-tabs--left .el-tabs__header.is-left {
				margin-right: 0px;
				
			}
			.step2-wrapper .el-tabs__content {
				padding: 20px;
				box-sizing: border-box;
				background-color: #F8F8FF;
				border-right: 1px solid #EEEEEE;
					
					
			}
			.step2-wrapper .el-tabs__content .content-title{
				display: inline-block;
				/* margin-bottom: 18px; */
				line-height: 14px;
			}
			.step2-wrapper  .content-title .num{
				font-weight: bold;
				color: #6462F3;
			
			}
			.step2-wrapper .content-item-wrapper .content-item {
				cursor: pointer;
				color:#6462F3;
				display: inline-block;
				line-height: 14px;
				margin: 18px 0px;
			}
			.step2-wrapper .content-item-wrapper .content-item:hover {
				text-decoration: underline;
			}
/* 			.el-input--suffix .el-input__inner:focus  .el-input__prefix, .el-input__suffix{
				color:#6462F3;
			} */

			

			/* step 2  end*/
			
			
			
			/* step 4 */
			.step4-wrapper {
				background-color: #fff;
				border-radius: 4px;
			}
			.step4-wrapper .form-wrapper {
				border-radius: 0px;
				padding-bottom: 0px;
				
			}
			.step4-wrapper .el-form-item__label {
				padding-left: 20px;
			}
			
			.step4-wrapper .el-form {
				width: 700px;
			}
			.step4-wrapper .el-form-item__content  {
				display: flex;
				justify-content: flex-start;
			}
			.step4-wrapper .el-select {
				width: 100%;
			}
			
			.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
				display: none;
			}
			.el-upload-list {
				display: flex;
			} 
			.el-upload-list--picture .el-upload-list__item {
				width: 106px;
				margin-right: 20px;
			}
			.el-icon-close-tip  {
				display: none !important;
			}
			.upload-demo .el-button {
				
				border: 1px solid #6462F3 !important;
				color: #6462F3 !important;
			}
			.upload-demo .el-button:hover {
				background-color: #fff !important;
			}
			
			.upload-demo .el-button:focus {
				background-color: #fff !important;
			}
			
			.step4-wrapper .yzButton.sumbitorder {
				width: 160px;
				height: 40px;
				background: #6462F3;
				border-radius: 4px;
				color:#fff;
			}
			.step4-wrapper .sumbitorder-wrapper {
					padding: 20px 0;
					margin:0 20px;
					border-top: 1px solid #EEEEEE;
			}

			/* step 4 end */
			
		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderSubmit-wrapper table-wrapper section" v-cloak>
			<div class="orderSubmit-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">我的工单</span>
					<span class="nav-item">提交工单</span>
				</div>

				<div class="form-wrapper ">
					<div class="from-title-wrapper">
						<span @click="clickReturnButton" class="from-title"><i class="icon el-icon-back"></i>提交工单</span>
						<span @click="gotoHelpdocIndex" class="helpdoc">帮助文档>></span>
					</div>
					
					<div class="data-container">
						<div class="yz-type-title">
							<div class="yz-step step1 step-cur">
								<div class="icon-item"></div>
								<p class="h-sort">Step.1</p>
								<p class="p-sort">选择问题分类</p>
							</div>

							<div :class="{'step-cur':currentStep > 1}" class="yz-step step2">
								<div class="icon-item"></div>
								<p class="h-sort">Step.2</p>
								<p class="p-sort">选择具体问题</p>
							</div>

							<div :class="{'step-cur':currentStep > 2}" class="yz-step step3">
								<div class="icon-item"></div>
								<p class="h-sort">Step.3</p>
								<p class="p-sort">推荐解决方案</p>
							</div>

							<div :class="{'step-cur':currentStep > 3}" class="yz-step step4">
								<div class="icon-item"></div>
								<p class="h-sort">Step.4</p>
								<p class="p-sort">创建工单</p>
							</div>
						</div>
					</div>

				</div>
				<div v-if="currentStep === 1" class="form-wrapper step1-wrapper">
					<div class="category-wrapper">
						<p class="content-title-h5">
							工单分类
						</p>
						<el-input maxlength="50" @keyup.enter.native="gotoOrderSolveBykeyword('step1')" class="button-wrapper-right" style="width: 290px"
						 placeholder="请输入搜索内容" v-model="searchkeywords">
						  <i @click="gotoOrderSolveBykeyword('step1')" slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>
					<div class="type-wrapper">
						<el-row :gutter="20">
							<el-col v-for="(item,index) in problemGroup" :span="8">
								<div @click="handleselectproblemGroup(item,index)" :class="{'active': index === activeproblemGroupIndex}" class="is-appear">
									<div class="i-icon-box"></div>
									<div class="p-text-box">
										<i class="linear"></i>
										<p class="h5-text">{{item.label}}</p>
										<p class="p10-text">{{item.desc}}</p>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>

				<div v-if="currentStep === 2 || currentStep === 3" class="step2-wrapper">
					<div class="form-wrapper">
						<div class="form-wrapper-content fboxRow">
						  <el-input
						  	@keyup.enter.native="gotoOrderSolveBykeyword"
						  	class="button-wrapper-right"
						  	style="width: 290px"
						      placeholder="请输入搜索内容"
						      v-model="searchkeywords">
							   <i @click="gotoOrderSolveBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
						    </el-input>
							<div class="step-buttonwrapper fboxRow">
								<span> 没有您要的答案？</span>
								<div @click="submitOrder" class="yzButton  sumbitButton">提交工单</div>
							</div>
						</div>


					</div>
					<div class="form-wrapper ">
						<div class="category-wrapper">
							<p class="content-title-h5">
								请选择问题类型
							</p>
						</div>
						<el-tabs  v-model="activeTabName" @tab-click="problemtabSelect" tab-position="left">
							<el-tab-pane :name="problemtabname(index)" :label="item.label" v-for="(item,index) in problemTypeGroup" :key="index">
								<div class="el-tabs-content">
									<p class="content-title">
										为您推荐了 <span class="num">{{handleTotaldocNum(item)}}</span> 条高频问题，可能有您需要的答案
									</p>
									<div class="content-item-wrapper">
										<el-row>
											<el-col :span="8"  v-for="(contentitem,contentindex) in item.content"  :key="contentindex">
												<span @click="gotoHelpdoc(item,contentitem)" class="content-item">{{contentitem.title}}</span>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-tab-pane>
							<el-tab-pane  name="searchTab" label="搜索结果页面">
								<div class="el-tabs-content">
									<p v-if="selectproblemTypeGroup.length > 0" class="content-title">
										为您推荐了 <span class="num">{{selectproblemTypeGroup.length}} </span> 条高频问题，可能有您需要的答案
									</p>
									<p v-else class="content-title">
										搜索无结果
									</p>
									<div class="content-item-wrapper">
										<el-row>
											<el-col :span="8"  v-for="(contentitem,contentindex) in selectproblemTypeGroup"  :key="contentindex">
												<span @click="gotoHelpdoc(item,contentitem)" class="content-item">{{contentitem.title}}</span>
											</el-col>
										</el-row>
									</div>
								</div>
							</el-tab-pane>

						</el-tabs>
					</div>
				</div>
				<div v-if="currentStep === 4" class="step4-wrapper">
					<div class="form-wrapper haveBottomBorder">

						<el-form :model="form" :rules="rules" ref="form" label-width="180px" class="demo-ruleForm">

						  <el-form-item  label="问题类别"  prop="problemType">
						    <el-input :disabled="true" v-model="form.problemType"></el-input>
						  </el-form-item>
						 
						  <el-form-item label="问题标题" prop="problemTitle">
						    <el-select v-model="form.problemTitle" placeholder="请选择您的问题标题">
						      <el-option v-for="(item,index) in form.problemTitleOptions" :label="item.label" :value="item.id"></el-option>
						    </el-select>
						  </el-form-item>
						 
						<el-form-item label="问题描述"  prop="problemDesc">
							<el-input
							  type="textarea"
							  placeholder="请输入文字描述您所遇到的问题"
							  v-model="form.problemDesc"
							  maxlength="200"
							  :autosize="{ minRows: 4}"
							  show-word-limit
							>
						</el-form-item>
						
						<el-form-item label="机密信息(非必填项)" prop="secretInfo">
							<el-input
							  type="textarea"
							  placeholder="请输入文字描述您所遇到的问题"
							  v-model="form.secretInfo"
							   :autosize="{ minRows: 4}"
							  maxlength="200"
							  show-word-limit
							></el-input>
						</el-form-item>
						
						<el-form-item label="手机号码" prop="phoneNum">
						  <el-input :disabled="!phoneisChange" placeholder="请填写您的手机号码，方便我们与您联系" v-model="form.phoneNum"></el-input>
						</el-form-item>
						
						<el-form-item label="邮箱号码" prop="emailNum">
						  <el-input maxlength="50" :disabled="!emailisChange"   placeholder="请填写您的邮箱号码，方便我们与您联系" v-model="form.emailNum"></el-input>
						</el-form-item>
						
							<el-form-item label="添加附件" prop="addAdjunct">
								<el-upload
								  class="upload-demo"
								  ref="upload"
								  action="https://jsonplaceholder.typicode.com/posts/"
								  limit="5"
								  multiple="true"
								  :on-preview="handlePreview"
								  :on-remove="handleRemove"
								  :on-exceed="handleExceed"
								  :file-list="fileList"
								   list-type="picture"
								  :auto-upload="false">
								  <el-button slot="trigger" size="small">选取文件</el-button>
								  <div slot="tip" class="el-upload__tip">
								    最大可上传5个附件  <span  style="color: #6462F3;margin-left: 5px;">上传的附件支持的格式有:'jpg','png'</span> </div>
								</el-upload>
								
							</el-form-item>

						

						</el-form>
					</div>
					<div class="sumbitorder-wrapper">
						<div @click="handleClickOrder('form')" class="yzButton  sumbitorder">提交</div>
					</div>
						
				</div>


		


			</div>
					

		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderSubmit-wrapper',
				data: function() {
					// 手机正则验证
					const validateCheckPhone = function(rule, value, callback){
					  if (!value) {
					    callback(new Error('请输入手机号'))
					  }
					  
					 else  if (!/^1[0-9]{10}$/.test(value)) {
					    callback(new Error('请输入正确的手机号！'))
					  } 
					  
					}
					
					
					
					
					return {
						rules: {
						  phoneNum: [
						    { required: true,validator: validateCheckPhone, trigger: 'blur' }
						  ],
						  emailNum: [ { required: true, message: '请输入邮箱号码', trigger: 'blur' },{
						    required: true,
						    message: '请输入正确的邮箱',
						    pattern: /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@(([0-9a-zA-Z])+([-\w]*[0-9a-zA-Z])*\.)+[a-zA-Z]{2,9})$/,
						    trigger: 'blur'
						  }],
							problemTitle: [
							  { required: true, message: '请选择问题标题', trigger: 'blur' },
							],
						problemDesc: [
						  { required: true, message: '请输入问题描述', trigger: 'blur' },
						],
							
							
						},
						// 搜索关键字
						searchkeywords: undefined,
						activeproblemGroupIndex: undefined, // 步骤1 问题类型高亮
						problemGroup: [{
							label: '技术类',
							desc: '使用过程中出现的各种问题，如服务器无法连接等问题'
						}, {
							label: '咨询类',
							desc: '产品价格咨询，购买详情，配置了解等问题'
						}, {
							label: '其他类',
							desc: '如何退款，代理，合同等其他问题'
						}],
						problemTypeGroup:[{   // 问题类型数组  应用于step 2
							label: '问题类型一',
							content: [{
								title: '推荐1',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐2',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐3',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐4',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐5',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐6',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐7',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐8',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐9',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐10',
								id: 'xxxx', // id 跳转到帮助文档有用
							},{
								title: '推荐11',
								id: 'xxxx', // id 跳转到帮助文档有用
							}]
							
						},{
							label: '问题类型二',
							content: [{
								title: '推荐1',
								id: 'xxxx', // id 跳转到帮助文档有用
							}]
						},{
							label: '问题类型三',
							content: [{
								title: '推荐1',
								id: 'xxxx', // id 跳转到帮助文档有用
							}]
						},{
							label: '问题类型四',
							content: [{
								title: '推荐1',
								id: 'xxxx', // id 跳转到帮助文档有用
							}]
						},{
							label: '问题类型五',
							content: [{
								title: '推荐1',
								id: 'xxxx', // id 跳转到帮助文档有用
							}]
						}],
						currentStep: undefined,// 当前处理到第几步  默认是第一步
						activeTabName:'tab0', // 默认选中第一个 tab0   searchTab 搜索结果
						selectproblemTypeGroup:[{
							title: '搜索结果1',
							id:'xxxxx'
						},{
							title: '搜索结果2',
							id:'xxxxx'
						},{
							title: '搜索结果3',
							id:'xxxxx'
						},{
							title: '搜索结果3',
							id:'xxxxx'
						}],
						form: {  // 表单数据
							problemType: '技术类',
							problemTitle: undefined,
							problemTitleOptions:[{
								id:1,
								label:'标题：自学vue3.0'
							},{
								id:2,
								label:'标题：自学react 16'
							},{
								id:3,
								label:'标题：自学微信小程序'
							}], 
							problemDesc:undefined,
							secretInfo:undefined,
							phoneNum: undefined,
							emailNum:'1025535910@qq.com'
						},
						phoneisChange: true, // 电话号码是否可以被改变
						emailisChange:true, // 邮箱是否可以被改变
						fileList: []
					}
				},

				methods: {
					// 跳转到帮助中心首页
					gotoHelpdocIndex: _throttle(function() {
						console.log('跳转到帮助中心首页')
					}),
					      handleClickOrder:function(formName) {
							  let that =  this
							  let isAccess = true
							  that.$refs[formName].validate(function (valid){
								  isAccess = valid
								if (!valid) {
								  that.$message.error('请正确填写表单后，再提交')
								  return false;
								}
								return
							  });
							  
							  if(isAccess) {
								 console.log('通过校验')
								  that.$refs.upload.submit(); 
							  }

					      },
					
					　　beforeAvatarUpload:function(file) {
					　　　　const isJPG =file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/gif'
					　　　　const isLt2M = file.size / 1024 / 1024 < 1024
					　　　　if (!isJPG) {
					　　　　　　this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
					　　　　　　return isJPG
					　　　　}
					　　　　if (!isLt2M) {
					　　　　　　this.$message.error('上传头像图片大小不能超过 2MB!')
					　　　　　　return isLt2M
					　　　　}
					// 　　　　this.multfileImg = file
					　　　　return isJPG && isLt2M
					　　　},
					      handleRemove:function(file, fileList) {
					        console.log(file, fileList);
					      },
					      handlePreview:function(file) {
					        console.log(file);
					      },
						  // 超出数量限制限制 回调函数
							handleExceed:function(files, fileList) {
							totalNum =  files.length + fileList.length
							this.$message.error('当前限制选择 5 个文件，本次选择了' + files.length + '个文件，共选择了'+  totalNum  + '个文件');
							},
					
					
					//跳转到帮助文档
					gotoHelpdoc:function(item,contentitem) {
						console.log('准备跳转到帮助文档')
						console.log(item,contentitem)
					},
					
					// step 2 tab 改变
					problemtabSelect:function(e) {
						console.log(e)
						// 改变导航内容最小高度
						this.changeNavcontentHeight()
						// 步骤进入到第三步
						this.currentStep = 3
						sessionStorage.setItem("currentStep", this.currentStep)
					},
					clickReturnButton:_throttle(function() {
						this.currentStep = 1
						sessionStorage.setItem("currentStep", this.currentStep)
					}),
					// 改变导航内容最小高度
					changeNavcontentHeight: function() {
						// 设置内容最小高度
						const  navheight = $('.step2-wrapper .el-tabs__nav').height()

						$('.step2-wrapper .el-tabs__content').css('min-height',navheight)
					},
					
					// 点击选择问题类型
					handleselectproblemGroup: function(item, index) {
						
						this.activeproblemGroupIndex = index
						// 进入到第2步
						this.currentStep = 2
						sessionStorage.setItem("currentStep", this.currentStep)
						// 搜索关键字需要初始化
						this.searchkeywords = undefined
						// 改变导航内容最小高度
						this.changeNavcontentHeight()

						
						
						
						
					},
					// 跳转到工单解决页面
					gotoOrderSolveBykeyword: _throttle(function(key) {
						if(key === 'step1') {
							this.currentStep = 2
							sessionStorage.setItem("currentStep", this.currentStep)
						}
						this.changeNavcontentHeight()

						this.activeTabName = 'searchTab'
					}),
					
					
					// 统计有多少条高频问题
					handleTotaldocNum: function(item) {
						const num = item.content.length
						return num > 0 ? num : 0
					},
					//  step 2 tab  name 属性返回值
					problemtabname: function(index) {
						return  'tab'  + index
					},
					// 点击提交工单
					submitOrder:_throttle(function() {
						console.log('点击提交工单 这里应该请求后才改变currentStep的值  这里需要先请求再跳转到第四步')
						this.currentStep = 4
						sessionStorage.setItem("currentStep", this.currentStep)
						
						// 标题默认选取第一个
						this.form.problemTitle = this.form.problemTitleOptions[0].id || undefined
						
						const phoneNum =  this.form.phoneNum
						const  emailNum = this.form.emailNum
						// 不可以被改变
						if(phoneNum !== undefined  && phoneNum !== null) {
							this.phoneisChange = false
						}
						
						if(emailNum !== undefined  && emailNum !== null) {
							this.emailisChange = false
						}
					}),
				},
				mounted: function() {
					

					
					
					const localcurrentStep = Number(sessionStorage.getItem("currentStep")) 
					if(localcurrentStep !== null && localcurrentStep !== 0) {
						this.currentStep =  localcurrentStep
						if(this.currentStep === 4) {
							// 调取第四部 点击工单的方法
							this.submitOrder()
						}
					}else {
						this.currentStep = 1
					}
					

					

					
					
				}

			})
		</script>
	</body>
</html>
